<template>
  <view class="empty-data">
    <!--默认空内容-->
    <view class="box" v-if="type == 1">
      <image class="img" src="@/static/image/emy.png" mode="aspectFit"></image>
      <view class="title"> {{ t('other.noContentYet') }}</view>
    </view>
    <!--搜索空内容-->
    <view class="box box-result" v-if="type == 2">
      <image class="img" src="@/static/image/emy.png" mode="aspectFit"></image>
      <view class="title"> {{ t('other.resultNotFound') }}</view>
      <view class="text"> {{ t('other.resultNotFoundText') }}</view>
    </view>
    <!--收藏空内容-->
    <view class="box box-fav" v-if="type == 3">
      <image class="img" src="@/static/image/null-collect.png" mode="aspectFit"></image>
      <view class="title"> {{ t('other.noFavourites') }}</view>
      <view class="text"> {{ t('other.noFavouritesText') }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 定义i18n
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const props = defineProps({
  // 类型：1.通用 2.搜索结果为空 3.收藏
  type: {
    type: [Number, String],
    default: 1
  }
})
</script>

<style lang="scss" scoped>
.empty-data {
  margin-top: 20px;

  .box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    height: 100%;

    .img {
      width: 156px;
      height: 117px;
    }

    .title {
      //margin-top: 27px;

      font-size: 18px;
      font-weight: bold;
      line-height: 42.62px;
      text-align: center;
      letter-spacing: 0px;

      /* 主题色 */
      color: #303030;
    }

    .text {
      width: 227px;
      height: 36px;
      opacity: 1;

      font-size: 13px;
      font-weight: normal;
      line-height: 18px;
      text-align: center;
      letter-spacing: 0px;

      /* 辅助文字 */
      color: #999999;
    }
  }

  .box-result {
    .img {
      width: 209px;
      height: 171px;
    }

    .text {
      width: 219px;
      height: 36px;
      opacity: 1;

      font-size: 13px;
      font-weight: normal;
      line-height: 18px;
      text-align: center;
      letter-spacing: 0px;

      /* 辅助文字 */
      color: #999999;
    }
  }

  .box-fav {
    .img {
      width: 149px;
      height: 141px;
    }

    .text {
      width: 246px;
      height: 36px;
      opacity: 1;

      font-size: 13px;
      font-weight: normal;
      line-height: 18px;
      text-align: center;
      letter-spacing: 0px;
    }
  }
}
</style>
